<template>
  <div class="common-container goodsinfo-container">
    <div class="common-navigation">
      <h6>首页 &gt; 商品列表 &gt; {{ detail.goodsName }}</h6>
    </div>
    <div class="goodsinfo-introduce">
      <div class="goodsinfo-goodsimg">
        <img src="http://img.111zh.cn/Uploads/Attachment/2021-07-21/60f79e4bc590f.jpg" :alt="detail.goodsName" :title="detail.goodsName" >
      </div>
      <div class="goodsinfo-goodswords">
        <h6>{{ detail.goodsName }}</h6>
        <div class="tags"></div>

        <div class="sale-info-group">
          <div class="sale-info">
            <div class="sale-price-box">
              <div class="dis-price">
                <span class="t">价&nbsp;&nbsp;&nbsp;格：</span>
                <strong>

                  <span style="margin-left: 10px" >¥<em style="margin: 0 10px">{{ total }}</em>元</span>
                </strong>
                <span class="discount" id="selectedSaleTip">限时价</span>
              </div>
              <div class="ori-price has-dis">
                <span class="price">原价￥<span>{{ total }}</span></span>
              </div>

              <!--<div class="sale-count">近期销售</br>0件</div>-->
            </div>
            <div class="pro-row">
              <div class="hd">类&nbsp;&nbsp;&nbsp;型：</div>
              <div class="bd">
                <span class="text badge-auth badge-auth-p">提取卡密</span>                                                                    </div>
              <div class="pro-row">
                <div class="hd">服&nbsp;&nbsp;&nbsp;务：</div>
                <div class="bd">
                  <span class="service-item">
                    <span class="el-icon-circle-check"></span>
                    限时低价
                  </span>
                  <span class="service-item">
                    <span class="el-icon-circle-check"></span>
                    正确有效
                  </span>
                  <span class="service-item">
                    <span class="el-icon-circle-check"></span>
                    售后支持
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="f-box">
              <nuxt-link
                class="buy-btn buyBtnClass"
                :to="`/orderInfo4?id=${detail.goodsID}`">
                立即下单
              </nuxt-link>

            <!-- <a
              >
              <el-buttonbu
                class="y-btn buyBtnClass">
                购买
              </el-button>
            </a> -->

            <!-- <el-button @click="goBack" style="margin-left: 30px">返回</el-button> -->
            <a class="add-fav-btn dofavorite" data-id="1" data-isdo="0" href="javascript:;">
              <span class="el-icon-star-on" />加入收藏
            </a>
            <a class="add-jubao">
              <span
                class="el-icon-warning"
                style="margin-right: 5px" />
                违规举报
            </a>
        </div>



        <!--<p>商品类型：<span>自动发货</span></p>-->
        <!--<p>近期销售：<span>4次</span></p>-->
        <!--<p>销售单价：<span>1元</span></p>-->
        <!--<p>商品保障：-->
        <!--	-->
        <!--	-->
        <!--	-->
        <!--</p>-->

        <!-- <p>服务承诺：<span>内发货</span></p> -->
        <!--<a class="layui-btn layui-btn" href="/buy/1.html">立即购买</a>-->

        <!--	<a  class="add-fav-btn dofavorite"  data-id="1" data-isdo="0" href="javascript:;">加入收藏</a>-->
        <!--	-->
        <!-- </a> -->
      </div>
      <div class="common-container goodsinfo-comment">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <ul class="layui-tab-title">
            <li class="layui-this"><a href="javascript:void(0);">商品详情</a></li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="newgoodsitem"><i class="iconfont icon-light"></i><span>充值/演示：</span><a href="http://50qk.33xgk.com/product/1158.html"><font color="red"></font></a>--</div><hr>						<div class="layui-tab-item layui-show"></div>
            </div>
            <div class="layui-tab-item"></div>
          </div>
        </div>
      </div>
      <div class="common-container goodsinfo-comment">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <ul class="layui-tab-title">
            <li class="layui-this"><a href="javascript:void(0);">注意事项</a></li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="layui-tab-item layui-show"></div>
            </div>
            <div class="layui-tab-item"></div>
          </div>
        </div>
      </div>
      <el-dialog :visible="confirmVisible" width="600px" title="确认下单" @close="confirmVisible = false">
        <el-form label-width="100px">
          <div style="line-height: 30px; font-weight: 600; margin-left: 32px;padding-left: 32px" class="tip">
            友情提示：请注意核对用户的充值信息正确性，由于提交信息错误导致充错，用户自行负责！
          </div>
          <el-form-item label="商品名称">
            <div>{{ detail.goodsName }}</div>
          </el-form-item>
          <el-form-item label="注意事项">
            <div>{{ detail.goodsNote }}</div>
          </el-form-item>
          <el-form-item label="商品类型">
            <div>提取卡密</div>
          </el-form-item>
          <el-form-item label="充值数量">
            <div>
              <el-select v-model="num" placeholder="请选择数量">
              <el-option v-for="i in detail.cardNum" :key="i" :label="i" :value="i">
              </el-option>
            </el-select>个
            </div>
          </el-form-item>
          <el-form-item label="购买备注">
            <div>{{ remark }}</div>
          </el-form-item>
          <el-form-item v-if="hasTradePwd" label="交易密码">
            <el-input style="width: 380px" placeholder="请输入交易密码" v-model="password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer " style="text-align:center;">
          <!-- <el-button style="color: red" type="text" @click="forget"
            >忘记密码？</el-button
          > -->
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="confirmVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible="chongzhiible" width="840px" title=" " @close="chongzhiible = false;isLoading=false">
        <charge ref="chongzhi"></charge>
<!--        <el-button @click="chongzhiible = false;isLoading=false">取 消</el-button>-->
      </el-dialog>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'
import charge from '@/pages/charge5'
export default {
  layout: 'webIn44',
  middleware: ['tradePwd'],
  data() {
    return {
      isLoading: true,
      detail: {},
      num: 0,
      action: 1,
      showPrice: false,
      password: '',
      remark: '',
      confirmVisible: false,
      chongzhiible:false
    }
  },
  components: {
    charge,
  },
  computed: {
    ...mapState({
      hasTradePwd: (state) => state.hasTradePwd
    }),
    total() {
      let price = this.detail.goodsPrice * this.num
      price = parseFloat(price.toFixed(3))
      if (isNaN(price)) {
        return 0
      }
      return price
    }
  },
  async mounted() {
    const { id } = this.$route.query
    const dres = await this.$axios.get(`goods/goods/getGoods?goodsID=${id}`)
    if (dres.code === 1001 && dres.body) {
      this.detail = dres.body
      if (this.detail.cardNum > 0) {
        this.num = 1
      }
    }
    this.isLoading = false
  },
  methods: {
    async submit() {
      if (!this.num) {
        return this.$message.error('请选择购买数量')
      }
      if (this.num > this.detail.cardNum) {
        return this.$message.error('卡密库存不足')
      }
      if (this.hasTradePwd && !this.password) {
        return this.$message.error('请输入交易密码')
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const reqData = {
        goodsID: this.detail.goodsID,
        num: this.num
      }
      const res = await this.$axios.post('/order/order/addOrder', null, {
        params: reqData
      })
      if (res.code === 1001 && res.body) {
        this.$message.success('购卡成功')
        setTimeout(() => {
          this.$router.push(`/success?orderID=${res.body.orderID}`)
        }, 1500)
      } else {
        if(res.code == 1011){
          this.$confirm('是否进行充值 ? ? ?', '余额不足', {
            confirmButtonText: '充值',
            cancelButtonText: '取消'
          })
            .then(() => {
              this.chongzhiible=true;
              loading.close()
              //  console.log('充值')
              // location.href = `/charge`
            })
            .catch((action) => {
              //  console.log('取消')
              loading.close()
            })

        }else if(res.code == 1002){
          return this.$message.error(res.msg)
        }

        // setTimeout(() => {
        //   location.href = `/charge`
        // }, 100)
      }
    },
    goBack() {
      history.back()
    }
  }
}
</script>

<style scoped>
.goodsinfo-container{
	background: white;
	overflow: hidden;
	padding:10px 20px 20px;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 10px !important;
	border:1px solid #dcdcdc;
	border-radius: 3px;
}



.goodsinfo-goodsimg img{
	width: 100%;
	height: 100%;
	border-radius: 2%;
}

.common-navigation{
	position: relative;
}
.common-navigation h6{
	line-height: 40px;
	font-size: 14px;
	color: #666;
}

.goodsinfo-introduce{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.goodsinfo-goodsimg{
	position: relative;
	width: 400px;
	height: 400px;
	float: left;
}

.goodsinfo-nature{
	position: absolute;
	width: 330px;
	top: 50px;
	right: 100px;
}

.goodsinfo-nature img{
	width: 80px;
	height: 80px;
}




.goodsinfo-goodswords{
	position: relative;
	width: 700px;
	float: right;
}

.goodsinfo-goodswords h6{
	position: relative;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	margin-bottom: 5px;

}
.goodsinfo-goodswords p{
	line-height:35px;
	font-size: 14px;
}
.goodsinfo-goodswords p span{
	color: #ff0000;
	margin: 0 3px;
}

.goodsinfo-goodswords p .must-read{
	color: #666;
}

.goodsinfo-goodswords p i{
	font-size: 20px;
	vertical-align: sub;
	cursor:pointer;
	margin-left: 10px;
}
.goodsinfo-goodswords .layui-btn{
	margin-top: 70px;
	height: 40px;
    line-height: 40px;
    width: 136px;
    margin-right: 10px;

	font-size:16px;
}

.goodsinfo-comment{
	background: white;
	overflow: hidden;
	padding: 20px 20px 30px;
	box-sizing: border-box;
	border:1px solid #dcdcdc;
	margin-top: 10px !important;
	border-radius: 3px;
	min-height: 350px;
}

.goodsinfo-hasimg{
	position: absolute;
	top:50px;
	right:150px;
	width: 250px;
	display: none;
}
.goodsinfo-hasimg img{
	width: 110px;
	height: 110px;
	cursor: pointer;
	float: left;
	margin-right:20px;
	margin-bottom:20px;
	opacity: .4;
	transform: rotate(30deg);
}
.goodsinfo-hasimg img:nth-child(2n){
	margin-right: 0;
}
.goodsinfo-hasimg img:nth-child(2){
	transform: rotate(-30deg);
}
.goodsinfo-hasimg img:nth-child(3){
	transform: rotate(-30deg);
}
.goodsinfo-hasimg img:nth-child(4){
	transform: rotate(30deg);
}
</style>
<style lang="scss" scoped>
.sale-info {
  padding: 0;
  color: #8d8e99;
  font-size: 14px;
  position: relative;
  line-height: 36px;
}

.sale-price-box {
  position: relative;
  height: 36px;
}

.dis-price {
  margin-right: 5px;
  position: relative;
  white-space: nowrap;
  float: left;
}

span.t {
  width: 47px;
  margin-right: 13px;
  float: left;
}

.p-num {
  font-size: 30px;
  color: #FF5436;
  height: 36px;
  font-weight: bold;
  float: left;
  margin-top: 0px;
}

span.yen {
  display: inline-block;
  vertical-align: text-bottom;
}

span#selectedPrice {
  display: inline-block;
  vertical-align: text-bottom;
  line-height: 36px;
}

.sale-count {
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  color: #8d8e99;
  font-size: 14px;
  padding: 0 0 0 20px;
  line-height: 18px;
}

.sale-count:before {
  content: '';
  height: 31px;
  position: absolute;
  left: 0;
  top: 3px;
  border-left: 1px solid #DCDCDE;
}

.sale-info-group {
  background-color: #F7F8FA;
  padding: 20px 15px;
  border-radius: 10px;
}

.tags {
  margin-bottom: 15px;
}
.pro-row {
  padding: 20px 0 1px;

}

.hd {
  float: left;
}

.bd {
  margin-left: 65px;
}

span.service-item {
  line-height: 34px;
  margin-right: 12px;
  white-space: nowrap;
  color: #8d8e99;
}

span.service-item [class*=el-icon] {
  color: #FF8B77;
}

span.service-item:before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  // background: url(../assets/images/item.png) no-repeat 0 0;
}
span.text {
  word-break: break-all;
  color: #8d8e99;
  line-height: 34px;
}
.f-box {
  padding: 70px 0 0;
  position: relative;
}
span.price {
  text-decoration: line-through;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  font-size: 12px;
}
span#selectedSaleTip {
  font-size: 14px;
  color: #fff;
  background-color: #FF8B77;
  line-height: 18px;
  position: absolute;
  top: -10px;
  padding: 0 10px;
  margin: 0 0 0 7px;
  white-space: nowrap;
}

span#selectedSaleTip:before {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 0;
  height: 0;
  border-width: 3px;
  border-style: dashed dashed solid;
  border-color: transparent transparent #FF8B77;
}
a.buy-btn.buyBtnClass {
  color: #212537;
  background-color: #FFD200;
  font-size: 17px;
  font-weight: bold;
  display: inline-block;
  line-height: 50px;
  border-radius: 3px;
  padding: 0 15px;
  min-width: 230px;
  text-align: center;
}

a.buy-btn.buyBtnClass:hover {
  background: #ffda33;
}

a.add-fav-btn {
  display: inline-flex;
  align-items: center;
  text-align: center;
  color: #626266;
  margin-left: 10px;
  font-size: 14px;
  span {
    font-size: 1.5em;
    color: rgb(255,210,0);
  }
}

a.add-fav-btn:before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 15px;
  height: 15px;
  background: url(../assets/images/fav.png) no-repeat 0 -30px;
  margin: 0 5px 0 0;
}
.add-fav-btn.has:before {
  background-position: 0 -15px;
}
a.add-jubao {
  display: inline-flex;
  align-items: center;
  text-align: center;
  color: #626266;
  margin-left: 10px;
  font-size: 14px;
  span {
    font-size: 1.2em;
    color: rgb(255,210,0);
  }
}
// @import 'element-ui/lib/theme-chalk/index.css';
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style61/common.css';
// @import 'assets/style/style61/style.css';
// @import 'assets/style/style61/font_1451715_0505c2bxv7b7.css';
.box-card {
  ::v-deep.el-form-item__label {
    text-align: left;
    padding-left: 20px;
  }
  ::v-deep.el-textarea {
    textarea {
      line-height: 30px;
    }
  }
}
.submit {
  .tip {
    padding: 0 !important;
  }
  ::v-deep.el-form-item {
    margin-bottom: 8px;
  }
}
.xgk-madestyle-search {
  position:absolute;
  right:0;
  top:25px;
}
.xgk-madestyle-search .layui-input-inline {
  float:left;
}
.xgk-madestyle-search .layui-select-title input {
  border-radius:2px 0 0 2px;
  border-right:none;
}
.xgk-madestyle-searchbtn {
  position:relative;
  height:31px;
  line-height:31px;
  margin-left:-1px;
}

</style>
